<template>
  <view class="page_pre page-container top_padding">
    <view class="page_main">
		<view class="top_select">
			<my-search @blur="searchOk"></my-search>
		</view>
      

      <view class="list">
        <view class="list_item flex bgfff mb28" v-for="(item, index) in dataSouce" :key="index" @click="goPage(item.id)">
          <view class="left flex-sk0 cfff flex flex-col just-center align-center">
           <image :src="$fullImage(item.coverUrl)" mode="aspectFill"></image>
          </view>

          <view class="right flex flex-col just-sb w100">
            <view class="title c333 fwb text-ellipsis-2">{{ item.title }}</view>
            <view class="content c999 fs22">
              <view class="time flex just-sb align-center">{{ item.startTime }}-{{ item.endTime }}<view
                  class="state fs20"  :class="'state'+item.status">{{ states[item.status] }}</view>
              </view>
              <view class="address" >{{ item.addr }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {gateway} from '@/utils/api.js'
import {useListHook,} from '@/utils/hooks.js'
export default {
	mixins: [useListHook],
  data() {
    return {
      list: [],
	  listUrl:gateway.sysrural+'/village/villageActivityInfo/list',
      states: ['未开始', '进行中', '已结束'],
	  params:{
		  title:''
	  }
    }
  },
  onLoad() {
    // this.getList();
  },
  methods: {
    getList() {
      let data = [
        {
          id: 1,
          title: '欧营“村节”联欢晚会',
          category: '在线预约',
          letter: 'ONLINE',
          startTime: '01.20 08:30',
          endTime: '02.20 12:00',
          address: '欧营村村委大会议室405',
          picUrl: '',
          state: 0
        },
        {
          id: 2,
          title: '欧营“村节”联欢晚会',
          category: '在线预约',
          letter: 'ONLINE',
          startTime: '01.20 08:30',
          endTime: '02.20 12:00',
          address: '欧营村村委大会议室405',
          picUrl: '',
          state: 1
        },
        {
          id: 3,
          title: '欧营“村节”联欢晚会',
          category: '在线预约',
          letter: 'ONLINE',
          startTime: '01.20 08:30',
          endTime: '02.20 12:00',
          address: '欧营村村委大会议室405',
          picUrl: '',
          state: 2
        },
      ];

      this.list = data.map((item, index) => ({
        id: item.id,
        title: item.title,
        category: item.category,
        letter: item.letter,
        startTime: item.startTime,
        endTime: item.endTime,
        address: item.address,
        picUrl: item.picUrl,
        state: item.state
      }));
    },
    goPage(id) {
		// console.log(id);
      let url = '/pages/preBook/detail?id=' + id
      uni.navigateTo({
        url: url,
      });
    },
	searchOk(val){
		this.params.title=val
		this.loadData(1)
	}
  }
}
</script>

<style lang="less" scoped>
.page_pre {
  .page_main {
    width: 694rpx;
    // margin: 40rpx auto 0;

    .list {
      .list_item {
        .left {
          width: 209.03rpx;
          height: 209.03rpx;
          background: linear-gradient(180deg, #67a0ff, #ede1ff);
          border-radius: 16.67rpx;
		  overflow: hidden;

          >view:nth-child(1) {
            font-size: 33rpx;
            font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
            font-weight: 400;
            letter-spacing: 3.33rpx;
          }

          >view:nth-child(2) {
            opacity: 0.44;
            font-size: 42.36rpx;
            font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
            font-weight: 400;
            text-align: left;
          }
        }

        .right {
          padding: 33rpx 28rpx;
          line-height: 44rpx;

          .title {
            font-size: 28rpx;
            text-align: left;
          }

          .content {
            line-height: 44rpx;
            font-size: 22rpx;

            .time {
              .state {
                width: 90rpx;
                height: 31rpx;
                line-height: 31rpx;
                border-radius: 15rpx;
                font-size: 19rpx;
                color: #ffffff;
                text-align: center;

                &.state0 {
                  background: #423dd4;
                }

                &.state1 {
                  background: #628fcb;
                }

                &.state2 {
                  background: #a5a5b0;
                }
              }
            }

            .address {
              background: url(/static/address.png) left center no-repeat;
              background-size: 28rpx 26rpx;
              padding-left: 40rpx;
            }
          }
        }
      }
    }
  }
}
</style>
